<!--
 * @Author: gyc
 * @Date: 2020-04-20 10:56:19
 * @LastEditTime: 2020-08-14 08:24:24
 * @Description: Nuxt测试版
 -->

 <template>
  <div class="mo-login">
    <!-- <nuxt-link to="/">跳转</nuxt-link> -->
    <div class="login-main">
      <h3>登录</h3>
      <div class="login-input">
        <label>用户名</label>
        <input type="text" v-model="username" />
      </div>
      <div class="login-input">
        <label>密码</label>
        <input type="password" v-model="password" />
      </div>
      <div class="login-pandc">
        <div class="login-pandc-box">
          <label>验证码</label>
          <div>
            <span>{{codeA}}+{{codeB}}=</span>
            <input type="text" v-model="code" />
          </div>
        </div>
        <p>
          没有账号?
          <nuxt-link to="/register">注册</nuxt-link>一个吧!
        </p>
      </div>
      <div class="login-btn">
        <sao-button msg="确定" :type="2" @confirm="toLogin"></sao-button>
        <nuxt-link to="/">
          <sao-button msg="返回" :type="1"></sao-button>
        </nuxt-link>
      </div>
    </div>
  </div>
</template>
<script>
import buttonSao from "@/components/button/button_sao";
import { Decrypt, Encrypt } from "@/assets/js/utils.js";
export default {
  name: "moLogin",
  data() {
    return {
      codeA: Math.floor(Math.random() * 100),
      codeB: Math.floor(Math.random() * 100),
      password: "",
      username: "",
      code: ""
    };
  },
  mounted() {
    // $(".mo-login").height($(document).height() + "px");
    // Encrypt 加密
    // let test1 = Encrypt("123456");
    // console.log(test1);
    // Decrypt 解密
    // let test2 = Decrypt(Encrypt("123456"));
    // console.log(test2);
  },
  components: {
    "sao-button": buttonSao
  },
  methods: {
    toLogin() {
      if (
        this.username !== "" &&
        this.password !== "" &&
        this.code == this.codeA + this.codeB
      ) {
        this.$axios
          .post("/api/auth/login", {
            username: this.username,
            password: this.password
          })
          .then(res => {
            if (res.data.data != null) {
              localStorage.setItem("loginCode", Encrypt(res.data.userid));
              this.$router.push("/");
            } else {
              this.code = "";
              this.codeB = Math.floor(Math.random() * 100);
              this.codeA = Math.floor(Math.random() * 100);
              this.$Message.info("用户名或密码不正确！");
            }
          });
      } else {
        this.code = "";
        this.codeB = Math.floor(Math.random() * 100);
        this.codeA = Math.floor(Math.random() * 100);
        this.$Message.info("信息有误！");
      }
    }
  }
};
</script>
<style lang="scss" scoped>
// @media screen and (min-width: 1367px) {
//   .mo-login {
//     height: 936px;
//   }
// }
a {
  color: blue;
}
.mo-login {
  display: flex;
  width: 100%;
  background-color: #eee;
  justify-content: center;
  align-items: center;
  // min-height: 667px;
  position: absolute;
  padding: 10px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  .login-main {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    height: 420px;
    width: 300px;
    background-color: white;
    h3 {
      color: black;
    }
    .login-input {
      width: 80%;
      color: black;
      input {
        width: 100%;
        outline: none;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid #aaa;
        &:focus {
          border-bottom: 1px solid black;
        }
        &:focus label {
          font-size: 24px;
        }
      }
    }
    .login-pandc {
      width: 80%;
      color: black;
      .login-pandc-box {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 25px;
        input {
          width: 40px;
          outline: none;
          border-top: 0;
          border-left: 0;
          border-right: 0;
          border-bottom: 1px solid #aaa;
          &:focus {
            border-bottom: 1px solid black;
          }
          &:focus label {
            font-size: 24px;
          }
        }
      }
      p {
        margin-top: 10px;
        text-align: right;
      }
    }

    .login-btn {
      width: 80%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>